<template>
  <div class="wrapper">
    <table>
      <thead class="table-header bg-[#1a2c38] text-[#b1bad3] text-sm">
        <tr>
          <th class="p-4 text-left lg:text-center">
            {{ $t("page.table.game") }}
          </th>
          <th class="p-4 text-center hidden lg:table-cell">
            {{ $t("page.table.Time") }}
          </th>
          <th class="p-4 text-right lg:text-center">
            {{ $t("page.table.betamount") }}
          </th>
          <th class="p-4 text-center hidden lg:table-cell">
            {{ $t("page.table.prize") }}
          </th>
          <th class="p-4 text-center hidden lg:table-cell">
            {{ $t("page.table.earnings") }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          class="table-row bg-[#213743] text-[#b1bad3]"
          v-for="(item, i) in tableData"
          :key="i"
        >
          <td
            class="p-4 text-left lg:text-center text-white font-semibold truncate"
          >
            {{ item.game_name }}
          </td>
          <td class="p-4 text-center hidden lg:table-cell truncate">
            {{ item.reckon_at }}
          </td>
          <td class="p-4 text-right lg:text-center truncate">
            {{ item.bet_amount }}
          </td>
          <td class="p-4 text-center hidden lg:table-cell truncate">
            {{ item.prize }}
          </td>
          <td class="p-4 text-center hidden lg:table-cell truncate">
            {{ item.profit }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup></script>

<style scoped></style>
